<html>
  <head>
    <title></title>
    <meta content="">
    <link rel="stylesheet" href="style/spech-bubble.css">
  </head>
  <body>
	<div id="container">
		<header>
			<hgroup>
				<h1>Pure CSS speech bubbles</h1>
				<h2>By <a href="http://nicolasgallagher.com/">Nicolas Gallagher</a></h2>
			</hgroup>

			<p>The demo page for <a href="http://nicolasgallagher.com/pure-css-speech-bubbles/">Pure CSS speech bubbles</a>.</p>
			<p>For a detailed explanation <a href="http://nicolasgallagher.com/pure-css-speech-bubbles/demo/default.css">view the CSS file</a>. It is heavily commented.</p>

			<p>All examples use simple, semantic HTML. No empty elements, no
unnecessary extra elements, no JavaScript, no images (apart from that
Twitter logo). Have a look at the source code.</p>
		</header>

		<div class="content">
			<h2>Simple examples</h2>

			<p class="triangle-obtuse left">Long very-very long message mgujtglgliugkgaslfglgiuwqrhlsadsafkljhop87o3qhvbtybow.</p>
			<p>me</p>
			<p class="triangle-obtuse right">Inbox Message. khgbo761lbiyiou iuyguyrv86t iy876g87v tb87698q7634tkjhiuy</p>
			<p>Bunda</p>
			<p class="triangle-obtuse left">Replay Message. iyb876i3byc9ybp93v[]kp;l;khkljbskd ksjbdivuhgiuweh gkjwhriyg93ohor wglhog wrglhowgegweiugowiug gowiruoguiw t2loito2y4t 4toioyrt afafaferg.</p>
			<p>me</p>
			<p class="triangle-obtuse right">Inbox Message. iyb876i3byc9y bp93v[] kp;l;khk ljbskd ksjbdivuh giuweh gkjw hriyg93ohor wglhog wrglhowgegweiugowiug gowiruoguiw t2loito2y4t 4toioyrt afafaferg.</p>
			<p>Bunda</p>
			<p class="triangle-obtuse right">Inbox Message.</p>
			<p>Bunda</p>
			<p class="triangle-obtuse left">Replay Again.</p>
			<p>me</p>
			<p class="triangle-obtuse left">Replay Again.</p>
			<p>me</p>
			<p class="triangle-obtuse right">Inbox Message.</p>
			<p>Bunda</p>
			<br/><br/><br/><br/>
			<h3 class="example-commentheading">125 comments</h3>

			<div class="example-obtuse left">
				<p>It's not what you look at that matters, it's what you see.kji6349ybv;jalkjfm  hoy w8y08 237p8yphb2yvhoy</p>
			</div>
			<p>Henry David Thoreau</p>

			<div class="example-obtuse right">
				<p>It's not what you look at that matters, it's what you see.</p>
			</div>
			<p>Henry David Thoreau</p>
		</div>

		<p>Read the article: <a href="http://nicolasgallagher.com/pure-css-speech-bubbles/">Pure CSS speech bubbles</a>.</p>
		<p class="follow"><a href="http://twitter.com/necolas">You can find me on <span>twitter</span></a>.</p>

	</div>
<!--div class="conversation">
			<div class="triangle-obtuse left">Long very-very long message mgujtglgliugkgaslfglgiuwqrhlsadsafkljhop87o3qhvbtybow.</div>
			<p>Bunda</p>
			<p class="triangle-obtuse right">Inbox Message. khgbo761lbiyiou iuyguyrv86t iy876g87v tb87698q7634tkjhiuy</p>
			<p>Me</p>
			<p class="triangle-obtuse left">Replay Message. iyb876i3byc9ybp93v[]kp;l;khkljbskd ksjbdivuhgiuweh gkjwhriyg93ohor wglhog wrglhowgegweiugowiug gowiruoguiw t2loito2y4t 4toioyrt afafaferg.</p>
			<p>Bunda</p>
			<p class="triangle-obtuse right">Inbox Message. iyb876i3byc9y bp93v[] kp;l;khk ljbskd ksjbdivuh giuweh gkjw hriyg93ohor wglhog wrglhowgegweiugowiug gowiruoguiw t2loito2y4t 4toioyrt afafaferg.</p>
			<p>Me</p>
			<p class="triangle-obtuse right">Inbox Message.</p>
			<p>Me</p>
			<p class="triangle-obtuse left">Replay Again.</p>
			<p>Bunda</p>
			<p class="triangle-obtuse left">Replay Again.</p>
			<p>Bunda</p>
			<p class="triangle-obtuse right">Inbox Message.</p>
			<p>Me</p>
			</div-->
</body>
</html>